<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width" initial-scale="1">
	<title>CSS3实现页面的平滑过渡</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="container">
	<div class="st-container">
	<!-- nav begin-->
	  <input type="radio" name="radio-set" checked="checked" id="st-control-1">
	  <a href="#st-panel-1">Serendipity</a>
	  <input type="radio" name="radio-set" id="st-control-2">
	  <a href="#st-panel-2">Albert</a>
	  <input type="radio" name="radio-set" id="st-control-3">
	  <a href="#st-panel-3">Fucking</a>
	  <input type="radio" name="radio-set" id="st-control-4">
	  <a href="#st-panel-4">MyLady</a>
	  <input type="radio" name="radio-set" id="st-control-5">
	  <a href="#st-panel-5">Yahoo</a>
	  <!--nav end content begin-->
	  <div class="st-scroll">
	    <section class="st-panel" id="st-panel-1">
 		  <div class="st-desc" data-icon="H"></div>
 		  <h2>Serendipity</h2>
 		  <p>Ttowards and back :He glanced backwards.2.with one's back facing the direction one is going in:The child walked backwards into a lamp-post.</p>
	    </section>
	    <section class="st-panel st-color" id="st-panel-2">
 		  <div class="st-desc" data-icon="1"></div>
 		  <h2>Albert</h2>
 		  <p>towards and back :He glanced backwards.2.with one's </p>
	    </section>
	    <section class="st-panel" id="st-panel-3">
 		  <div class="st-desc" data-icon="5"></div>
 		  <h2>Fucking</h2>
 		  <p>This secttowards and back :He glanced backwards.2.with one's </p>
	    </section>
	    <section class="st-panel st-color" id="st-panel-4">
 		  <div class="st-desc" data-icon="O"></div>
 		  <h2>MyLady</h2>
 		  <p>This sectiotowards and back :He glanced backwards.2.with one's n is st-panel-4</p>
	    </section>
	    <section class="st-panel" id="st-panel-5">
 		  <div class="st-desc" data-icon="G"></div>
 		  <h2>Yahoo</h2>
 		  <p>This section is towards and back :He glanced backwards.2.with one's st-panel-5</p>
	    </section>
	  </div>
	</div>
  </div>
</body>
</html>